<template>
    <div class="yizhan">
        <!--       门店搜索 -->
        <span class="from">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="驿站名称:">
                <el-input v-model="formInline.YZname"></el-input>
            </el-form-item>
                <el-form-item label="小区名称:">
                <el-input v-model="formInline.communityName"></el-input>
            </el-form-item>
                <!--                //日期-->
            <el-date-picker
                    v-model="value1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>
                <!--                //搜索日期-->
            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
        </el-form>
        </span>
        <!--        新增门店-->
        <div style="margin-bottom: 30px">
            <el-button type="text" @click="newData" :style="{'background-color':'#409EFF',color:'#fff',textAlign:'center',width:'100px',padding:'10px 0'}">
                <span>添加驿站</span>
            </el-button>
            <!--            新增驿站-->
            <el-dialog :title="title" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="驿站名称" :label-width="formLabelWidth">
                        <el-input autocomplete="off" v-model="form.courierStationName"></el-input>
                    </el-form-item>
                    <el-form-item label="驿站图片" :label-width="formLabelWidth">
                        <el-upload
                                class="avatar-uploader"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else style="width: 35px; height: 35px" class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="所属地区" :label-width="formLabelWidth">
                        <el-cascader
                                :options="addressAll"
                                clearable
                                v-model="address"
                                :props="{value:'label'}"
                                :style="{marginBottom:'25px'}"
                        ></el-cascader>
                        <el-input v-model="form.courierStationAddress" autocomplete="off" placeholder="请填写详细地址"></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="所属小区">
                        <template>
                            <el-select autocomplete="off" v-model="value" placeholder="请选择">
                                <el-option
                                        v-for="item in options"
                                        :key="item.communityId"
                                        :label="item.communityName+'('+item.communityProvince+item.communityCity+item.communityDistrict+item.communityAddress+')'"
                                        :value="item.communityId">
                                </el-option>
                            </el-select>
                        </template>
                    </el-form-item>
                </el-form>

                <!-------------------------------------------------------------------------------------------------->
                <div slot="footer" class="dialog-footer cf">
                    <el-button type="primary" @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveDate">保 存</el-button>
                </div>
                <!--                ---------------------------------------------------------------------------------->
            </el-dialog>
        </div>
        <!--        门店列表展示-->
        <template>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%"
                    :header-cell-style="{'background-color':'#409EFF',color:'#fff',textAlign:'center'}"
                    :cell-style="{'text-align':'center'}">
                <el-table-column
                        prop="courierStationId"
                        label="ID">
                </el-table-column>
                <el-table-column
                        prop="courierStationName"
                        label="驿站名称">
                </el-table-column>
                <el-table-column
                        prop="courierStationImage"
                        label="驿站照片">
                </el-table-column>
                <el-table-column
                        prop="courierStationAddress"
                        label="驿站地址">
                </el-table-column>
                <el-table-column
                        prop="communityName"
                        label="所在小区">
                </el-table-column>
                <el-table-column
                        prop="courierStationOrderCount"
                        label="订单总数">
                </el-table-column>
                <el-table-column
                        prop="addTime"
                        label="添加时间">
                </el-table-column>
                <el-table-column
                        prop="courierStationStatus"
                        label="状态">
                    <template slot-scope="scope">
                        <span class="span1" v-if = "scope.row.courierStationStatus =='上架中'" style="background-color: rgba(0,128,0,0.1); border: 1px solid #13ce66;color: #13ce66; font-size: 12px; padding: 1px 9px; border-radius: 5px">上架</span>
                        <span class="span1" v-else-if = 'scope.row.courierStationStatus =="已下架"' style="background-color: rgba(255,0,0,0.1); border: 1px solid #ff4949;color: #ff4949; font-size: 12px; padding: 1px 9px; border-radius: 5px">下架</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button  type="text" @click="changeStatus(scope.$index)" size="small">
                            <span v-if="scope.row.courierStationStatus =='已下架'">立即上架</span>
                            <span v-else-if="scope.row.courierStationStatus =='上架中'">立即下架</span>
                        </el-button>
                        <el-button @click="handleClick(scope.$index)" type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <div class="block">
            <el-pagination
                    small
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="pageSize"
                    :current-page="pageNum"
                    @next-click="nextClick"
                    @prev-click="prevClick"
                    @current-change="currentChange">
            </el-pagination>
        </div>


    </div>
</template>

<script>
    export default {
        name: "YiZhanComponent",
        data(){
            return{
                pageNum:1,
                pageSize:5,
                total:50,
                formInline: {
                    YZname: '',
                    communityName: ''
                },
                form: {
                    courierStationId:'',
                    courierStationName: '',
                    courierStationCity:"",
                    CommunityName:'',
                    courierStationAddress:'',
                    courierStationStatus:'',
                    courierStationCommunityId:'',
                    courierStationProvince:""
                },
                tableData:[],
                options:[],
                item:[],
                addressAll: [],   //省市区
                address:[], //你选择的地址
                title:"",
                value1: '',
                imageUrl: '',
                dialogFormVisible:false,
                formLabelWidth: '120px',
                boolean:"",
                value:"",
            }
        },
        created() {
            this.refresh();
            this.getAllProvinceAndCityList();
            this.selectData();
            // this.selectZhi();
        },
        methods:{
            //搜索日期
            onSubmit() {
                this.axios.get("/selectByPcsServlet", {
                    params:{
                        pageNum:1,
                        pageSize:5,
                        courierStationName:this.formInline.YZname,
                        communityName:this.formInline.communityName,
                        courierStationStatus:this.form.courierStationStatus,
                        startTime: this.getDateString(this.value1[0]),
                        endTime:this.getDateString(this.value1[1]),
                    }
                }).then(res=>{
                    console.log(res)
                    this.allObj = res.data;
                    this.tableData = res.data.list;
                    this.total=res.data.count;
                }).catch(err=>{

                })
            },
            //刷新
            refresh(){
                this.axios.get("/selectPcs",{
                    params:{
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                    }
                }).then((res)=>{
                    console.log(res)
                    this.tableData = res.data.list;
                    this.total=res.data.count;
                    this.changezhuangtai();
                }).catch(()=>{});
            },
            //选择器数据写入
            selectData(){
              this.axios.get("http://43.143.190.87:8091/panghudaojiaBackend/community/communityList?pageNum=1&pageSize=9999999").then((res)=>{
                  console.log(res)
                    this.options = res.data.data.list;
            }).catch(()=>{});
    },
    //数据刷新
    newData(){
        this.boolean = true;
        this.title = '添加驿站';
        this.dialogFormVisible = true;
                this.form.courierStationAddress = "";
                this.address = "";
                this.form.courierStationName = "";this.form.courierStationCommunityName ="";
                this.form.courierStationCommunityId = "";
                this.imageUrl = "";
            },
            //保存数据
            saveDate(){
              this.dialogFormVisible = false;
              if (this.boolean){
                  this.addData();
              }else {
                  this.changeData();
              }
            },
            //新增门店
            addData(){
                this.axios.post("/addPcs",{
                    courierStationName:this.form.courierStationName,
                    courierStationImage:this.imageUrl,
                    courierStationProvince:this.address[0],
                    courierStationCity: this.address[1],
                    courierStationDistrict:this.address[2],
                    courierStationAddress: this.form.courierStationAddress,
                    courierStationCommunityId:this.value,

                }, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                }).then((res)=>{
                    console.log(res);
                }).catch(()=>{});
                setTimeout(this.refresh,350);
            },
            handleClick(index) {
                this.boolean = false;
                this.dialogFormVisible = true;
                this.title = '编辑驿站';
                console.log(this.tableData);

                this.form.courierStationName = this.tableData[index].courierStationName;
                this.imageUrl = this.tableData[index].courierStationImage;
                this.form.courierStationAddress = this.tableData[index].courierStationAddress;
                this.address =[this.tableData[index].courierStationProvince+","+this.tableData[index].courierStationCity+","+this.tableData[index].courierStationDistrict]
                this.address[2] = this.tableData[index].courierStationDistrict;
                this.form.courierStationCommunityId = this.tableData[index].courierStationCommunityId;
                this.address[0] = this.tableData[index].courierStationProvince;
                this.form.courierStationId = this.tableData[index].courierStationId
            },
            //修改门店数据
            changeData(){
                this.axios.post("/updatePcs",{
                    addTime:this.getDateString(new Date),
                    courierStationAddress:this.form.courierStationAddress,
                    courierStationCity:this.address[1],
                    courierStationCommunityId:this.value,
                    courierStationCommunityName:this.form.courierStationCommunityName,
                    courierStationDistrict:this.address[2],
                    courierStationId:this.form.courierStationId,
                    courierStationImage:this.imageUrl,
                    courierStationName:this.form.courierStationName,
                    courierStationOrderCount:0,
                    courierStationProvince:this.address[0],
                    courierStationSort:1,
                    courierStationStatus:this.form.courierStationStatus,
                },{
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    }
                ).then((res)=>{
                    console.log(res)
                }).catch(()=>{});
                setTimeout(this.refresh,350);
            },
            //状态数字改字
            changezhuangtai(){
                for (let i = 0; i < this.tableData.length; i++) {
                    if (this.tableData[i].courierStationStatus == 1){
                        this.tableData[i].courierStationStatus = "上架中";
                    }else if (this.tableData[i].courierStationStatus == 0){
                        this.tableData[i].courierStationStatus = "已下架"

                    }
                }
            },
            //状态改变
            changeStatus(index){
                this.form.courierStationId = this.tableData[index].courierStationId;
                if (this.tableData[index].courierStationStatus =='上架中'){
                    this.axios.post("/updatePcsStatus",{
                        courierStationId:this.form.courierStationId,
                        courierStationStatus: 0
                    },{
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded'
                            }
                        }
                    ).then((res)=>{})
                }else if (this.tableData[index].courierStationStatus =='已下架'){
                    this.axios.post("/updatePcsStatus",{
                        courierStationId:this.form.courierStationId,
                        courierStationStatus: 1
                    },{
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded'
                            }
                        }
                    ).then((res)=>{})
                }
                setTimeout(this.refresh,350);
            },
            //下一页
            nextClick(){
                this.pageNum=this.pageNum+1;
                this.refresh();

            },
            //上一页
            prevClick(){
                this.pageNum--;
                this.refresh();
            },
            //点击任意页
            currentChange(currentPage){
                this.pageNum=currentPage;
                this.refresh();

            },
            //添加图片
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            //获取省市
            getAllProvinceAndCityList() {
                // 获取全国所有省份和城市的列表
                var that = this;
                this.$http
                    .get("https://restapi.amap.com/v3/config/district", {
                        // 高德地图的API
                        params: {
                            key: "39444c57178c072ed26912eab8a9f3d6", // 这个是申请的 Key，读者自行写入
                            keywords: "中国",
                            subdistrict: 3,
                            extensions: "base",
                        },
                    })
                    .then((response) => {
                        console.log(response.data)
                        for(let i = 0;i < response.data.districts[0].districts.length;i++){
                            let provinceMap = new Map();
                            provinceMap.value = response.data.districts[0].districts[i].adcode;   //区域编号
                            provinceMap.label = response.data.districts[0].districts[i].name;     //省名称
                            provinceMap.children = [];
                            that.addressAll.push(provinceMap);  //添加省份
                            for(let j = 0;j < response.data.districts[0].districts[i].districts.length;j++){
                                let cityMap = new Map()
                                cityMap.value = response.data.districts[0].districts[i].districts[j].adcode;   //区域编号
                                cityMap.label = response.data.districts[0].districts[i].districts[j].name;     //市名称
                                cityMap.children = [];
                                provinceMap.children.push(cityMap); //添加市
                                for(let k = 0;k <response.data.districts[0].districts[i].districts[j].districts.length;k++){
                                    let areaMap = new Map()
                                    areaMap.value = response.data.districts[0].districts[i].districts[j].districts[k].adcode;   //区域编号
                                    areaMap.label = response.data.districts[0].districts[i].districts[j].districts[k].name;     //区县名称
                                    cityMap.children.push(areaMap);   //添加区县
                                }
                            }
                        }
                    });
            },
            //封装日期转为字符串的函数
            getDateString(date){
                let yy = date.getFullYear();
                let mm = date.getMonth()+1;
                let dd = date.getDate();
                let hh = date.getHours();
                let mf = date.getMinutes()<10 ? '0'+date.getMinutes() : date.getMinutes();
                let ss = date.getSeconds()<10 ? '0'+date.getSeconds() : date.getSeconds();
                let str = yy + "-" + mm + "-" + dd +" " + hh + ":" + mf + ":" + ss;
                return str;
            },
        },
    }
</script>

<style scoped>
    .yizhan{
        padding: 20px;
    }
</style>